import React, { Component } from 'react'
function Hello(props) {
  return <h2>{props.message}</h2>
}
export class App extends Component {

  constructor(props){
    super(props)

    this.state={
      message: "跨越光年，归来任是你。 --臆影",
      counter:0
    }
  }
  textChange () {
    this.setState({message:"嘿嘿"})
  }

  counterChange(){
    // this.setState({counter:this.state.counter + 1})
    
    // this.setState({counter:this.state.counter + 1})

    // this.setState({counter:this.state.counter + 1})
    // 1 
    this.setState((state)=>{
      return {
        counter: state.counter +1
      }
    })
    this.setState((state)=>{
      return {
        counter: state.counter +1
      }
    })
    this.setState((state)=>{
      return {
        counter: state.counter +1
      }
    })
    // 3
  }
  render() {
    const {message,counter} = this.state
    return (
      <div>

        <div><h1>message:</h1></div>
        <div>
          <h2>{message}</h2>
        </div>
        <button onClick={e=>this.textChange()}>修改文本</button>
        <h2>counter:{counter}</h2>
        <button onClick={e=>this.counterChange()}>counter + 1</button>

        <Hello message={message}></Hello>
      </div>
    )
  }
}

export default App